<template>
  <view class="uni-padding-wrap uni-common-mt join need_scroll_top_view" :style="{backgroundImage: 'url(' + $store.state.imgBaseUrl + '/join/join-bg.png)'}">
    <!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"> -->
    <view class="common-tab">
      <!-- <view class="common-tab-text" :class="{active: rank == 2}" @click="changeTab(2)">实体商户</view> -->
      <view class="common-tab-text" :class="{active: rank == 4}" @click="changeTab(4)">大掌柜</view>
      <view class="common-tab-text" :class="{active: rank == 3}" @click="changeTab(3)">合伙人商户</view>
    </view>
    <view class="join-box" :style="{backgroundImage: 'url(' + $store.state.imgBaseUrl + '/join/join-bg2.png)'}">
      <view class="join-box-img" :style="{backgroundImage: 'url(' + $store.state.imgBaseUrl + '/join/join-' + rank + '.png)' }"></view>
    </view>
    <view class="join-icon-box">
      <block v-for="(item, index) in iconImg1" :key="index">
        <view class="box-con" @click="openDetailPop(index)">
          <image :src="item.img"></image>
          <view class="text1">{{item.text}}</view>
        </view>
      </block>
    </view>
    <!-- <view class="join-icon-box">
      <view class="box-con" v-for="(item, index) in iconImg1" :key="index" >
        <image :src="item.img"></image>
        <view class="text1">{{item.text}}</view>
      </view>
    </view>
    <view class="join-icon-box">
      <view class="box-con" v-for="(item, index) in iconImg2" :key="index">
        <image :src="item.img"></image>
        <view class="text1">{{item.text}}</view>
      </view>
    </view> -->
    <view class="footer">
      <view class="btn btn1" @click="openPop('person')">个人申请</view>
      <!-- <view class="btn btn2" @click="openPop('enterprise')">企业申请</view> -->
    </view>
    <!-- </scroll-view> -->
    <!-- 关联人弹窗 -->
    <uni-popup class="join-pop" ref="popup" type="center" :maskClick="false" :show="false">
      <view class="pop-box">
        <view class="pop-box-top">
          <text>被添加人信息</text>
          <view class="close" @click="closePop('popup')">
            <image :src="$store.state.imgBaseUrl + '/goodDetail/close.png'"></image>
          </view>
        </view>
        <view class="pop-box-cont">
          <view class="inpt-list">
            <view class="label">姓名</view>
            <view class="inpt"><input type="text" v-model="inviteInfo.name" @blur="backFixationTop()" placeholder="请填写姓名"></view>
          </view>
          <view class="inpt-list">
            <view class="label">手机</view>
            <view class="inpt"><input type="number" v-model="inviteInfo.phone" @blur="backFixationTop()" maxlength="11" placeholder="请填写手机号"></view>
          </view>
          <view class="agree">
            <block v-if="inlineModel && inlineModel.residueNumber > 0">
              <radio :value="isCheck" :checked="isCheck == '1'" @tap="isAgree" class="agree-radio" color="#999999"/>
              <text class="agree-text-1">是否使用推荐名额（{{inlineModel.residueNumber}}/{{inlineModel.totalNumber}}）</text>
            </block>
            <view v-else>
              暂无推荐名额
            </view>
          </view>
        </view>
        <view class="pop-box-footer">
          <button type="primary" class="sub-btn sub2" @click="sureChanePhone">下一步</button>
        </view>
      </view>
    </uni-popup>
    
    <!-- 权益详情  begin-->
    <view class="detail-box" v-if="detailFlag" @click="detailFlag=false">
      <swiper class="swiper" :interval="3000" :duration="1000" :current="curSwiperIndex" @change="getCurSwiperIndex" previous-margin="52rpx" next-margin="52rpx">
        <swiper-item v-for="(item, index) in swiperList" :key="item.id" >
          <view class="detail-box-item" :class="{bigItem: curSwiperIndex == index}" :style="{backgroundImage: 'url(' + bgTopImage +')'}">
            <view class="item-top-img" ></view>
            <view class="item-bot-img" :style="{backgroundImage: 'url(' + bgBotImage +')'}"></view>
            <view class="top-icon"><image :src="$store.state.imgBaseUrl + item.topIcom" mode=""></image></view>
            <view class="item-tit">{{item.tit}}</view>
            <view class="item-tab">
              <view class="box1"></view>
              <view class="box1"></view>
              <view class="text1">服务对象</view>
              <view class="box1"></view>
              <view class="box1"></view>
            </view>
            <view class="item-tab item-tab-cont">
              <view class="box2">
                <text class="text2"></text>
                <text>商户</text>
              </view>
              <view class="box2 box3">
                <text class="text2"></text>
                <text>合伙人商户</text>
              </view>
              <view class="box2">
                <text class="text2"></text>
                <text>大掌柜</text>
              </view>
            </view>
            <view class="item-tab item-tab2">
              <view class="box1"></view>
              <view class="box1"></view>
              <view class="text1">权益说明</view>
              <view class="box1"></view>
              <view class="box1"></view>
            </view>
            <view class="tab-list">
              <view class="list" v-for="(n, nindex) in item.explainList" :key="nindex">
                <text :class="{smallText: (item.id == 7 && nindex==1) || (item.id == 8 && nindex==3)}">{{n}}</text>
                <text class="smallText" v-if="item.id==5 && nindex==0">（自购省钱，分享还能赚钱）</text>
                <text class="smallText" v-if="item.id==5 && nindex==1">（平台提供各行各业都能适用的商品）</text>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 权益详情  end-->
  </view>
</template>
<script>
import uniPopup from "@/components/uni-popup/components/uni-popup/uni-popup.vue"
import {findUserNumber, checkInviteByMobile, bindingInvite } from "../../service/join/join.service.js"
import graceChecker from '@/unit/graceChecker.js'
import { scrollToTargetPosition } from '@/mixin/index.mixin.js'
import { detailDatas } from '@/unit/common.data.js'
export default {
  mixins: [scrollToTargetPosition],
  data() {
    return {
      type: null, // 加盟的类型 person=>个人申请  enterprise=>企业申请
      inviteInfo: { // 邀请人信息
        isShow: '',
        name: '',
        phone: '',
        grade: '',
        id: ''
      },
      phone: '', // 修改的手机号
      hintText: '请确认您的绑定关系,如若有误可点击修改',
      mobile: '',
      rank: 4, // 结盟等级
      isCheck: '0', // 是否同意登录注册协议 0：不同意 1：同意
      totalNub: 0,
      singleNub: 1,
      scrollTop: 0, // 滚动距离
      inlineModel: null, // 当前的加盟名额
      inlineArr: [], // 加盟名额信息
      iconImg1: [
        {id: 1, text: '低价采购', img: this.$store.state.imgBaseUrl + '/join/join-icon-1.png'},
        {id: 2, text: '引流管理', img: this.$store.state.imgBaseUrl + '/join/join-icon-2.png'},
        {id: 3, text: '营销工具', img: this.$store.state.imgBaseUrl + '/join/join-icon-3.png'},
        {id: 4, text: '专属客服', img: this.$store.state.imgBaseUrl + '/join/join-icon-4.png'},
        {id: 6, text: '超级权益', img: this.$store.state.imgBaseUrl + '/join/join-icon-5.png'},
        {id: 7, text: '营销案例', img: this.$store.state.imgBaseUrl + '/join/join-icon-6.png'},
        {id: 8, text: '商学院', img: this.$store.state.imgBaseUrl + '/join/join-icon-7.png'},
        {id: 9, text: '课程赠送', img: this.$store.state.imgBaseUrl + '/join/join-icon-8.png'}
      ],
      swiperList: '',
      bgTopImage: this.$store.state.imgBaseUrl + '/join/top.png',
      bgBotImage: this.$store.state.imgBaseUrl + '/join/foot.png',
      detailFlag: false,
      curSwiperIndex: 0
    };
  },
  components: {uniPopup},
  onLoad:function(option) {
    this.lookInviteInfo();
  },
  mounted() {
    this.swiperList = detailDatas;
  },
  methods: {
    getCurSwiperIndex(e) {
      this.curSwiperIndex = e.detail.current;
    },
    openDetailPop(index) {
      console.log(index, 'ijuoijoi')
      this.curSwiperIndex = index;
      this.detailFlag = true
    },
    isAgree () {
      this.isCheck = this.isCheck == '0' ? '1' : '0'
    },
    changeTab (t) {
      // 切换时间段
      this.rank = t;
    },
    sureChanePhone () { // 下一步
      //定义表单规则
      let rule = [
        {name:"name", checkType : "notnull", checkRule:"",  errorMsg: "请填写姓名"},
        {name:"phone", checkType : "notnull", checkRule:"",  errorMsg:"请输入手机号码"},
        {name:"phone", checkType : "phoneno", checkRule:"",  errorMsg:"请输入正确的手机号码"}
      ];
      //进行表单检查
      let checkRes = graceChecker.check(this.inviteInfo, rule);
      if (!checkRes) {
        uni.showToast({ title: graceChecker.error, icon: "none" });
        return false
      }
      this.getCheckInviteByMobile();
    },
    getCheckInviteByMobile () { // 保存申请信息
      let appliedType; // 申请类型(1名额添加，2付费加盟，3代上传)
      if (this.isCheck == '0') {
        appliedType = 3
      } else {
        appliedType = 1
      }
      let params = {
        mobile: this.inviteInfo.phone,
        rank: this.rank,
        appliedType: appliedType
      }
      uni.setStorage({
        key: 'joinInfo',
        data: params
      })      
      uni.navigateTo({
        url: '/pages/subsidiaryJoin/identityAuthen?type=' + this.type
      })  
    },
    openPop (type) { // 打开绑定用户弹窗
      this.inviteInfo.name = ''; //初始化姓名手机号
      this.inviteInfo.phone = '';
      this.$refs.popup.open()
      this.type = type; // 保存当前等级
      this.inlineModel = null; // 初始化当前名额
      this.isCheck = '0'; // 初始化是否使用名额
      let key = Object.keys(this.inlineArr); // 获取名额信息的key
      key.map(res => {
        if (this.rank == res) {
          this.inlineModel = this.inlineArr[res][0]
        }
      })
    },
    closePop (refs) { // 关闭弹窗
      this.$refs[refs].close();
      this.scrollTop = 0;
    },
    lookInviteInfo () { // 获取名额信息
      findUserNumber({},(res) => {
        if(res.status == 0) {
          this.inlineArr = res.data;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.join-icon-box {
  padding: 10rpx 62rpx 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .box-con {
    flex: 0 0 21%;
    text-align: center;
    margin-top: 60rpx;
    image {
      width: 104rpx;
      height: 104rpx;
    }
    .text1 {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(255,255,255,1)
    }
  }
}
image {
  width: 100%;
  height: 100%;
}
.join {
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-family: PingFang SC;
  position: relative;
  .common-tab {
    width: 70%;
    padding-top: 50rpx;
    margin: 0 auto 0;
    &-text {
      color: #F6DA99;
      font-size: 30rpx;
      font-weight: 500;
      opacity: 0.6;
      &.active {
        font-size: 42rpx;
        opacity: 1;
        &:after {
          content: '';
          background-color: #F6DA99;
          opacity:0.5;
          bottom: 2rpx;
        }
      }
    }
  }
  .join-box {
    width: 590rpx;
    height: 320rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 42rpx;
    position: relative;
    &-img {
      width: 267rpx;
      height: 113rpx;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 103rpx;
      right: 139rpx;
    }
  }
  .footer {
    width: 100%;
    position: absolute;
    bottom: 38rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      // width: 270rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #FFFFFF;
      border-radius: 10rpx;
      font-size: 36rpx;
      &.btn2 {
        width: 687rpx;
        border: 1px solid rgba(225,225,225,1);
      }
      &.btn1 {
        width: 687rpx;
        background: linear-gradient(-63deg,rgba(167,143,113,1) 0%,rgba(233,202,163,1) 100%);
        // margin-left: 53rpx;
      }
    }
  }
}

.pop-box {
  width: 500rpx;
  &-top {
    font-size: 30rpx;
    color: #333333;
    font-weight:500;
    border-bottom: 1px solid #E1E1E1;
    text-align: center;
    padding: 12rpx 0 30rpx;
    position: relative;
    .close {
      width: 25rpx;
      height: 25rpx;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  &-cont {
    padding: 49rpx 0;
    .inpt-list {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 27rpx;
      .label {
        font-size: 26rpx;
        color: #000000;
        font-weight:500;
        margin-right: 25rpx;
      }
      .inpt {
        width: 268rpx;
        height: 50rpx;
        border: 1px solid #E1E1E1;
        border-radius: 10rpx;
        input {
          height: 50rpx;
          font-size: 24rpx;
          color: #666666;
          text-indent: 20rpx;
        }
      }
      &.none {
        visibility: hidden;
      }
    }
    .agree {
      margin: 77rpx 0 0;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #999999;
      font-size: 24rpx;
      position: relative;
      .agree-radio {
        // width: 30rpx;
        // height: 30rpx;
        .uni-radio-input {
          width: 100%;
          height: 100%;
        }
      }
      .agree-text-1 {
        margin-left: 22rpx;
        color: #999999;
      }
      .agree-text-2 {
        color: #C2AC78;
      }
    }
  }
  .hint-text {
    font-size:24rpx;
    font-weight:500;
    color:rgba(67,67,67,1);
    text-align: center;
    margin-bottom: 16rpx;
  }
  &-footer {
    display: flex;
    justify-content: space-between;
    .sub-btn {
      width: 260rpx;
      height: 60rpx;
      line-height: 60rpx;
      color: #F6DA99;
      font-size: 24rpx;
      background-color: #434343;
      border: none;
      &.yellow {
        width: 180rpx;
        background-color: #F6DA99;
        color: #434343;
      }
      &.sub2 {
        width: 100%;
      }
    }
  }
}

</style>
